<template>
  <f7-page>
    <f7-navbar title="输入框" back-link></f7-navbar>
      <form>

      <div class="tien-form-group ">
        <div class='title'>邮件</div>
        <input placeholder="两字短标题" class='radius' name='input' />
      </div>
      <div class="tien-form-group">
        <div class='title'>输入框</div>
        <input placeholder="三字标题" class='radius' name='input' />
      </div>
      <div class="tien-form-group">
        <div class='title'>收货地址</div>
        <input placeholder="统一标题的宽度" class='radius' name='input' />
      </div>
      <div class="tien-form-group">
        <div class='title'>收货地址</div>
        <input placeholder="输入框带个图标" class='radius' name='input' />
        <span class='icon-locationfill text-orange'></span>
      </div>
      <div class="tien-form-group">
        <div class='title'>验证码</div>
        <input placeholder="输入框带个按钮" class='radius' name='input' />
        <button class='tien-btn bg-green shadow'>验证码</button>
      </div>
      <div class="tien-form-group">
        <div class='title'>手机</div>
        <input placeholder="输入框带标签" class='radius' name='input' />
        <div class="tien-capsule radius">
          <div class='tien-tag bg-blue '>
            +86
          </div>
          <div class="tien-tag line-blue">
            中国
          </div>
        </div>
      </div>


      
      </form>
  </f7-page>
</template>

<script>
import '../../css/colorui/form.css';
export default {
  name:'form',
  data() {
    return {
    };
  },
  mounted() {
    
  },
  methods: {
    
    
  },
};
</script>

